<template>
  <div ref="pages">
    <span class="news-text">{{ titleName }}</span>
    <a-divider style="margin-top:20px;margin-bottom:20px;" />
    <div class="search-div-select">
      <a-input-group compact>
        <a-select default-value="项目名称" style="width:130px;"  v-model="querySelect">
          <a-select-option value="1">
            项目名称
          </a-select-option>
          <a-select-option value="2">
            招标项目编号
          </a-select-option>
        </a-select>
        <a-input v-model="queryinput"  allow-clear style="font-size:12px;width:180px;"/>
      </a-input-group>
      <!-- <a-input v-model="queryinput" placeholder="请输入项目名称/招标项目编号" allow-clear style="font-size:12px;"/> -->
      <a-button type="primary" class="report-search-btn" @click="onQuery"
        >查询</a-button
      >
    </div>
    <div class="unit-table-div">
      <CustomTable
        :onRowClick="onDetail"
        ref="table"
        :showAlert="false"
        :showSelection="false"
        :columns="columns"
        :loading="load"
        @change="onTableChange"
        :dataSource="pageData"
      >
        <!-- :scroll="{ y: 400 }" -->
        <template slot="xh" slot-scope="text, record, index">
          {{
            (pageFilter.pageNo - 1) * pageFilter.pageSize + (index + 1) > 9
              ? (pageFilter.pageNo - 1) * pageFilter.pageSize + (index + 1)
              : "0" + (index + 1)
          }}
        </template>
      </CustomTable>
    </div>
  </div>
</template>

<script>
// import moment from "moment";
import emv from "@/views/center/emptyVue.vue";
import api from "@/api/index";
export default {
  name: "publicinfo",
  props: {
    page: {
      type: String,
      default: "1"
    }
  },
  data() {
    return {
      clientHeight: "",
      screenHeight: "",
      pageName: "tenderInfoPage",
      titleName: "招标信息",
      load: false,
      querySelect:'1',
      queryinput: "",
      columns: [
        {
          title: "序号",
          dataIndex: "xh",
          key: "xh",
          width: 80,
          scopedSlots: { customRender: "xh" }
        },
        {
          title: "项目名称",
          dataIndex: "nameXm",
          key: "nameXm",
          ellipsis: true
        },
        {
          title: "招标项目编号",
          dataIndex: "idZbxm",
          key: "idZbxm",
          ellipsis: true
        },
        {
          title: "标段（包）名称",
          dataIndex: "nameBd",
          key: "nameBd",
          ellipsis: true
        },
        {
          title: "招标人",
          dataIndex: "renBidding",
          key: "renBidding",
          ellipsis: true
        },
        {
          title: "招标代理机构",
          dataIndex: "unitZbdl",
          key: "unitZbdl",
          ellipsis: true
        }
      ],
      pageData: [],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  mounted(){
    this.setFootStyle();
    if(this.$route.query){
      this.queryinput = this.$route.query.queryinput;
      this.onQuery()
    }
    if(localStorage.getItem('contentHeader')){
      this.queryinput = localStorage.getItem('contentHeader')
      this.onQuery()
    }
  },
  created() {
    this.queryinput = this.$route.query.queryinput;
    if (this.queryinput) {
      this.pageFilter.nameXm = this.queryinput;
      this.pageFilter.idZbxm = '';
      this.refreshTable();
    }

  },
  methods: {
    onDetail(record) {
      this.$router.push({
        name: "bidInfoDetail",
        query: {
          type: "detail",
          id: record.id,
          breadcrumbName: "项目信息"
        }
      });
    },
    async refreshTable() {
      this.load = true;
      await api
        .get_bidinfo_list(this.pageFilter)
        .then(res => {
          let pageNo = this.pageFilter.pageNo;
          let pageSize = this.pageFilter.pageSize;
          let records = res.rows;
          let total = res.total;
          this.pageData = {
            ...this.pageData,
            pageNo,
            records,
            pageSize,
            total
          };
          this.load = false;
        })
        .catch(err => {
          this.load = false;
        });

      this.setFootStyle();
    },
    onTableChange(pageFilter) {
      this.pageFilter = { ...this.pageFilter, ...pageFilter };
      this.refreshTable();
    },

    getScreenHeight() {
      // 获取浏览器可视区域高度
      this.screenHeight = document.body.clientHeight; //`${document.documentElement.clientHeight}`
      window.onresize = function temp() {
        this.screenHeight = document.body.clientHeight;
      };
    },
    setFootStyle(){
       this.$nextTick(()=>{ // 页面渲染完成后的回调
                  this.getScreenHeight();
                  this.clientHeight = this.$refs.pages.offsetHeight+364;
                  // console.log(this.screenHeight,this.clientHeight);
                  if(this.screenHeight>this.clientHeight){
                    if(this.screenHeight-this.clientHeight>30){
                      emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight);
                    }else{
                       emv.$emit("setfootmargintop",30);
                    }
                  }else{
                    emv.$emit("setfootmargintop",30);
                  }

          });
      },
    onQuery() {
      if(this.querySelect=='1'){
        this.pageFilter.nameXm = this.queryinput;
        this.pageFilter.idZbxm = '';
      }else if(this.querySelect=='2'){
        this.pageFilter.nameXm = '';
        this.pageFilter.idZbxm = this.queryinput;
      }
      this.pageFilter.pageNo = 1;
      if(this.$route.query){
        this.queryinput = this.$route.query.queryinput;
      }
      if(localStorage.getItem('contentHeader')){
        this.queryinput = localStorage.getItem('contentHeader')
      }
      this.refreshTable();

    }

  },
  beforeRouteEnter(to, from, next) {
    // 设置下一个路由的 meta
    next(vm => {
      emv.$emit("setMenuKey", to.meta.mkey);
    });
  }
};
</script>
<style lang="less">
.news-text {
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #337bd7;
}

.unit-table-div {
  margin-left: -10px;
  .ant-table-thead > tr > th {
    padding: 16px 16px;
    overflow-wrap: break-word;
    font-size: 16px;
  }
  .ant-table-tbody > tr > td {
      padding: 16px 16px;
      overflow-wrap: break-word;
      font-size: 14px;
  }
}
.search-div-select {
  // width: 320px;
  display: flex;
  margin-bottom: 20px;
  .report-search-btn {
    // width: 80px;
    height: 40px;
    background: #337bd7;
    border: 0;
    border-radius: 4px;
    margin-left: 10px;
    margin-top: 1px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
  }
  .ant-btn-primary:hover,
  .ant-btn-primary:focus {
    color: #fff;
    background-color: #337bd7;
    border-color: #337bd7;
  }
   .ant-input-group {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    position: relative;
    display: table;
    // width: 50%;
    width: 320px;
    border-collapse: separate;
    border-spacing: 0;
  }

  .ant-input-group.ant-input-group-compact > *:first-child, .ant-input-group.ant-input-group-compact > .ant-select:first-child > .ant-select-selection, .ant-input-group.ant-input-group-compact > .ant-calendar-picker:first-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-select-auto-complete:first-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-cascader-picker:first-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-mention-wrapper:first-child .ant-mention-editor, .ant-input-group.ant-input-group-compact > .ant-time-picker:first-child .ant-time-picker-input {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    height: 40px;
}

.ant-input-affix-wrapper .ant-input {
    position: relative;
    text-align: inherit;
    height: 40px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #999999;
}

.ant-select-selection--single .ant-select-selection__rendered {
    margin-right: 24px;
    line-height: 40px;
}
}

</style>
